import 'package:lighthouse/index.dart';

class ScreenPage extends StatefulWidget {
  const ScreenPage({Key? key}) : super(key: key);

  @override
  _ScreenPageState createState() => _ScreenPageState();
}

class _ScreenPageState extends State<ScreenPage> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }
  ///
  ///  type 类型  1、选中 2、单项 3、多选 4、排序
  ///
  final List _subHeaderList = [
    {"id": 1, "title": "默认排序", "type": 1, "value": null},
    {"id": 2, "title": "销量", "type": 2, "value": null},
    {"id": 3, "title": "价格", "type": 3, "value": false},
    {"id": 4, "title": "筛选", "type": 4, "value": null}
  ];
  int _selectHeaderId = 0;
  bool _screen = false;
  bool _downOpt = false;

  final List _radioList = [
    {"id": '1', "title": "综合1"},
    {"id": '2', "title": "综合2"},
    {"id": '3', "title": "综合3"},
    {"id": '4', "title": "综合4"}
  ];
  var _radioValue = '';

  final List _checkBoxList = [
    {"id": '1', "title": "销量1", "check": false},
    {"id": '2', "title": "销量2", "check": false},
    {"id": '3', "title": "销量3", "check": false},
    {"id": '4', "title": "销量4", "check": false},
    {"id": '1', "title": "销量1", "check": false},
    {"id": '2', "title": "销量2", "check": false},
    {"id": '3', "title": "销量3", "check": false},
    {"id": '4', "title": "销量4", "check": false}
  ];

  @override
  Widget build(BuildContext context) {
    final size =MediaQuery.of(context).size;
    return Stack(
      children: [
        GlobalStyle(
          child: BackgroundStyleWidget(
            child: Scaffold(
              appBar: AppBar(
                title: const Text('筛选'),
                centerTitle: true,
              ),
              body: Stack(
                children: [
                  ListView.builder(
                    itemBuilder: (BuildContext context, int index) {
                      return Text('Item$index', textAlign: TextAlign.center);
                    },
                    itemExtent: 50,
                  ),
                  Positioned(
                    top: 0,
                    left: 0,
                    width: MediaQuery.of(context).size.width,
                    child: Container(
                      decoration: const BoxDecoration(
                        color: Colors.white,
                          border: Border(
                              bottom: BorderSide(
                                  width: 1,
                                  color: Color.fromRGBO(233, 233, 233, 0.9)))),
                      child: Column(
                        children: [
                          Row(
                            children: _subHeaderList.map((item) {
                              return Expanded(
                                child: InkWell(
                                  onTap: (){
                                    _updateValue(item);
                                  },
                                  child: Container(
                                    padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
                                    child: _isType(item),
                                  ),
                                )
                              );
                            }).toList(),
                          ),
                        ],
                      )
                    ),
                  ),
                  if(_downOpt)
                    Positioned(
                    top: 49,
                    left: 0,
                    child: Stack(
                      children: [
                        Container(
                          width: size.width,
                          height: size.height,
                          color: Color.fromRGBO(0, 0, 0, 0.5),
                          child: GestureDetector(
                            onTap: (){
                              setState(() {
                                _downOpt = false;
                              });
                            },
                          ),
                        ),
                        Positioned(
                          child: Container(
                            width: size.width,
                            height: 240,
                            color: Colors.white,
                            child: SingleChildScrollView(
                              child: screenDom(2)
                            )

                          ),
                        )
                      ],
                    )
                  ),
                ],
              ),
            ),
          ),
        ),
        if(_screen)
          Positioned(
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              child: Stack(
                children: [
                  Container(
                    width: size.width,
                    height: size.height,
                    color: Color.fromRGBO(0, 0, 0, 0.5),
                    child: GestureDetector(
                      onTap: (){
                        setState(() {
                          _screen = false;
                          _selectHeaderId = 0;
                        });
                      },
                    ),
                  ),
                  Positioned(
                    top: 0,
                    right: 0,
                    child: Container(
                        width: 240,
                        height: size.height,
                        color: Colors.white
                    ),
                  )
                ],
              )
          )
      ],
    );
  }
  /// 分类
  Widget _isType(value){
    if(value['type'] == 1){
      return pitch0n(value);
    }
    if(value['type'] == 2){
      return sortChange(value);
    }
    if(value['type'] == 3){
      return multipleChoice(value);
    }
    if(value['type'] == 4){
      return screenChange(value);
    }
    return const Text('');
  }
  /// 选中
  Widget pitch0n(item){
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
            item['title'],
            style: TextStyle( color: _selectHeaderId == 1 ? Colors.blue : Colors.black)
        ),
      ],
    );
  }
  /// 排序
  Widget sortChange(item){
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
            item['title'],
            style: TextStyle( color: _selectHeaderId == 2 ? Colors.blue : Colors.black)
        ),
        Column(
            children: [
              SizedBox(
                height: 6,
                child: Icon(Icons.arrow_drop_up, color: item['value'] == 'dec' ? Colors.blue : Colors.black, size: 22),
              ),
              Icon(Icons.arrow_drop_down, color: item['value'] == 'sec' ? Colors.blue : Colors.black, size: 22),
            ],
          )
      ],
    );
  }
  /// 单选
  Widget multipleChoice(item){
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
            item['title'],
            style: TextStyle( color: _selectHeaderId == 3 ? Colors.blue : Colors.black)
        ),
        Icon( item['value'] ? Icons.arrow_drop_up : Icons.arrow_drop_down, color: _selectHeaderId == 3 ? Colors.blue : Colors.black, size: 22),
      ],
    );
  }
  /// 筛选
  Widget screenChange(item){
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
            item['title'],
            style: TextStyle( color: _selectHeaderId == 4 ? Colors.blue : Colors.black)
        ),
        Icon(Icons.screen_lock_portrait, color: _selectHeaderId == 4 ? Colors.blue : Colors.black,)
      ],
    );
  }
  /// 点击事件
  void _updateValue(item){
    setState(() {
      _selectHeaderId = item['id'];
      if(item['type'] == 1){

      }
      if(item['type'] == 2){
        _downOpt = false;
        if(item['value'] == null){
          item['value'] = 'sec';
          return;
        }
        if(item['value'] == 'sec'){
          item['value'] = 'dec';
          return;
        }
        if(item['value'] == 'dec'){
          item['value'] = null;
          return;
        }
      }else{
        _subHeaderList[1]['value'] = null;
      }
      if(item['type'] == 3){
        item['value'] = !item['value'];
        _downOpt = !_downOpt;
      }else{
        _downOpt = false;
        _subHeaderList[2]['value'] = false;
      }
      if(item['type'] == 4){
        _screen = true;
      }else{
        _screen = false;
      }
    });
  }

  Widget screenDom(value) {
    if (value == 1) {
      return Column(
          children: _radioList.map((v) {
        return RadioListTile<String>(
          groupValue: _radioValue,
          value: v['id'],
          title: Text(v['title']),
          controlAffinity: ListTileControlAffinity.trailing,
          onChanged: (value) {
            setState(() {
              _radioValue = value!;
            });
          },
        );
      }).toList());
    } else {
      return Column(
          children: _checkBoxList.map((v) {
        return CheckboxListTile(
          value: v['check'],
          title: Text(v['title']),
          onChanged: (value) {
            setState(() {
              v['check'] = value;
            });
          },
        );
      }).toList());
    }
  }
}
